<template>
  <div style="margin-top: 100px">
    <el-row v-if="model.logon">
      <el-col :span="8">&nbsp;</el-col>
      <el-col :span="8">
        <el-card shadow="always" header="个人资料">
          <el-form ref="form" :model="model" label-width="100px">
            <el-form-item label="姓名">
              {{model.name}}
            </el-form-item>
            <el-form-item label="登录名">
              {{model.loginName}}
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" round @click="showChangePassword()">
                修改密码
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="修改密码" :visible.sync="changePasswordDialogVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="旧密码" :label-width="100">
          <el-input v-model="changePasswordModel.oldPassword" show-password="true" maxlength="15"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="新密码(6-15)" :label-width="100">
          <el-input v-model="changePasswordModel.newPassword" show-password="true" maxlength="15"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="重复密码(6-15)" :label-width="100">
          <el-input v-model="changePasswordModel.passwordRepeat" show-password="true" maxlength="15"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!changePasswordModel.isPasswordValid()" @click="changePassword();">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChangePasswordModel from '@/domain/ChangePassword.js'
import LoginModel from '@/domain/Login.js'

export default {
  name: 'Welcome',
  data () {
    return {
      changePasswordDialogVisible: false,
      model: new LoginModel(),
      changePasswordModel: new ChangePasswordModel()
    }
  },
  methods: {
    changePassword: async function () {
      let error = await this.changePasswordModel.savePassword()
      if (error) {
        this.$message.error(error)
        return
      }
      this.$message.success('修改成功')
      this.changePasswordDialogVisible = false
    },
    showChangePassword: function () {
      this.changePasswordDialogVisible = true
      this.changePasswordModel.reset()
    }
  },
  mounted: async function () {
    await this.model.getLogin()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #addDeviceConfig {
    margin: 10px;
  }
</style>
